
//宽度转换vw
@function vww($number) {
	@return ($number / 375) * 750 + px;
}

view {
	box-sizing: border-box;
}

.city-serach {
	width: 100%;
	color: #4a4a4a;
	padding: 0 vww(10);

	&-input {
		margin: vww(10) 0;
		height: vww(40);
		line-height: vww(40);
		font-size: vww(14);
		padding: 0 vww(5);
		border: 1px solid #4d8cfd;
		border-radius: 3px;
	}
}

.city-select-main {
	position: relative;
	// overflow: scroll;
	// -webkit-overflow-scrolling: touch;
	width: 100%;
	height: 100%;
	background: #fff;
	// overflow-y: auto;
}

.city-select {
	position: relative;
	width: 100vw;
	height: 100vh;
	background: #fff;

	// 热门城市
	.hot-title {
		padding-left: vww(12);
		width: 100vw;
		font-size: 28px;
		line-height: vww(40);
		color: #9b9b9b;
	}

	.hot-city {
		padding-left: vww(12);
		padding-right: vww(20);
		overflow: hidden;
		width: 100vw;

		.hot-item {
			float: left;
			padding: 0 vww(5);
			margin-right: vww(16);
			margin-bottom: vww(12);
			overflow: hidden;
			width: vww(100);
			height: vww(31);
			font-size: 28px;
			text-align: center;
      border-radius: 8px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			line-clamp: 1;

			line-height: vww(31);
			color: #4a4a4a;
			background: #fff;
			border: 1px solid #ebebf0;

			&:nth-child(3n) {
				margin-right: 0;
			}
		}

		.hot-hidden {
			display: none;
			margin-right: 0;
		}
	}

	.citys {
    border-top: 24px solid #F6F7F8;
		.citys-row {
			padding:0 vww(12);
			width: 100%;
			font-size: 28px;
			background: #fff;

			.citys-item-letter {
				margin-left: vww(-12);
				padding-left: vww(12);
				margin-top: -1px;
				width: 100vw;
				line-height: vww(30);
				color: #9b9b9b;
				border-top: none;
			}

			.citys-item {
				width: 100%;
				line-height: vww(40);
				color: #4a4a4a;
				border-bottom: 1px solid #ecedee;
        
				&:last-child {
					border: none;
				}
			}
		}
	}

	.city-indexs-view {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 999;
		display: flex;
		width: vww(24);
		height: 100%;
		text-align: center;

		.city-indexs {
			width: vww(20);
			text-align: center;
			vertical-align: middle;
			align-self: center;

			.city-indexs-text {
				width: vww(20);
				font-size: 24px;
				color: #646566;
        white-space: nowrap;
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
}